<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单打字游戏</title>
    <!--    页面样式引入-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="heading">
        简单打字游戏
    </div>
    <!--        头部部分，显示WPM（每分钟字数）、CPM（每分钟字符数）,以及错误数、剩余时间、准确性-->
    <div class="header">
        <!--        WPM-->
        <div class="wpm">
            <div class="header_text">WPM</div>
            <div class="curr_wpm">100</div>
        </div>
        <!--CPM-->
        <div class="cpm">
            <div class="header_text">CPM</div>
            <div class="curr_cpm">100</div>
        </div>
        <!--        错误数-->
        <div class="errors">
            <div class="header_text">Errors</div>
            <div class="curr_errors">0</div>
        </div>
        <!--        当前剩余时间-->
        <div class="timer">
            <div class="header_text">Time</div>
            <div class="curr_time">60s</div>
        </div>
        <!--        准确性-->
        <div class="accuracy">
            <div class="header_text">%Accuracy</div>
            <div class="curr_accuracy">100</div>
        </div>

    </div>

    <!--    显示当前键入的文本-->
    <div class="quote">
        点击下面区域开始游戏
    </div>
    <!--    显示当前输入的文本，以及作为打字区域-->
    <textarea class="input_area" placeholder="在这里开始打字..." oninput="processCurrentText()"
              onfocus="startGame()"></textarea>
    <button class="restart_btn" onclick="resetValues()">重新开始</button>

</div>

<!--引入JS文件-->
<script src="system.js"></script>
</body>
</html>